<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted } from 'vue'

import HelpMask from './help-mask/index.vue'

import { curAnswerIdx, curAnswerLevel, levelList, curQuestion, isFirst, isLast } from './data'
import { clear, selectLevel, next, pre, finish, finishAll } from './data'
import { imagePath } from '@/libs/file-utils'

const img_bg = imagePath('quiz/mbti/detail/bg.png')
const img_logo = imagePath('quiz/mbti/detail/logo.png')
const card_bg_1 = imagePath('quiz/mbti/detail/card-bg-1.svg')
const card_bg_2 = imagePath('quiz/mbti/detail/card-bg-2.svg')
const btn_bg_long = imagePath('quiz/mbti/detail/btn-bg-long.png')
const btn_bg_short = imagePath('quiz/mbti/detail/btn-bg-short.png')

onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-mbti-detail"
    :showTopBar="false"
    :pageStyle="{
      backgroundImage: 'linear-gradient(180deg, #F0E4FF 0%, #F4E2FA 100%)'
    }"
  >
    <div
      class="question"
      :style="{ backgroundImage: img_bg }"
    >
      <template v-if="curQuestion">
        <div class="progress-bar">
          <div
            class="logo"
            :style="{ backgroundImage: img_logo }"
          ></div>
          <div class="progress">
            <span class="val">{{ curQuestion.progress.currentStage }}/</span>{{ curQuestion.progress.stageCount }}
          </div>
          <div class="bar">
            <div
              class="inner"
              :style="{ width: curQuestion.progress.currentStage / curQuestion.progress.stageCount * 100 + '%' }"
            ></div>
          </div>
          <div class="tip">{{ curQuestion.progress.stageName }}</div>
        </div>

        <div class="card">
          <div
            class="icon left top"
            :style="{ backgroundImage: card_bg_1 }"
          ></div>
          <div
            class="icon right top"
            :style="{ backgroundImage: card_bg_1 }"
          ></div>
          <div
            class="icon left bottom"
            :style="{ backgroundImage: card_bg_2 }"
          ></div>
          <div
            class="icon right bottom"
            :style="{ backgroundImage: card_bg_2 }"
          ></div>

          <div class="content">
            <div class="title">{{ curQuestion.text }}</div>

            <div class="option">
              A
              <div class="text">{{ curQuestion.options[0]?.label }}</div>
            </div>
            <div class="option">
              B
              <div class="text">{{ curQuestion.options[1]?.label }}</div>
            </div>
          </div>
        </div>

        <div class="level-bar">
          <div
            v-for="(item, idx) in levelList"
            :key="idx"
            :class="item.name"
          >
            <div
              v-if="curAnswerIdx === item.idx && curAnswerLevel >= item.level"
              class="inner"
            ></div>
            <div
              class="click-area"
              @click="selectLevel(item)"
            ></div>
          </div>

          <div class="label A">A</div>
          <div class="label B">B</div>
        </div>
      </template>

      <div
        v-if="isLast"
        class="btn long start"
        :class="{ active: curQuestion?.options[curAnswerIdx] }"
        :style="{ backgroundImage: btn_bg_long }"
        @click="finish"
      >开始打蒜</div>
      <div
        v-if="!isFirst"
        class="btn pre active"
        :class="{
          long: isLast,
          short: !isLast
        }"
        :style="{
          backgroundImage: isLast ? btn_bg_long : btn_bg_short,
          left: isLast ? '130rpx' : '76rpx'
        }"
        @click="pre"
      >上一题</div>
      <div
        v-if="!isLast"
        class="btn short next"
        :class="{ active: curQuestion?.options[curAnswerIdx] }"
        :style="{ backgroundImage: btn_bg_short }"
        @click="next()"
      >下一题</div>

      <div
        class="btn test active"
        :style="{ backgroundImage: btn_bg_short }"
        @click="finishAll"
      >一键跳过</div>
    </div>

    <template #page>
      <HelpMask />
    </template>
  </PageWrapper>
</template>

<style lang="less" scoped>
.question {
  width: 724rpx;
  height: 1594rpx;
  float: right;

  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;

  .progress-bar {
    margin-top: 140rpx;
    margin-left: 24rpx;

    display: flex;
    align-items: flex-end;

    .logo {
      width: 96rpx;
      height: 139rpx;
    }

    .progress {
      color: #504A51;
      font-size: 40rpx;
      line-height: 58rpx;

      .val {
        color: #70058E;
      }
    }

    .bar {
      width: 318rpx;
      height: 16rpx;

      margin-left: 14rpx;
      margin-bottom: 12rpx;

      border-radius: 8rpx;
      background-color: #D9D9D9;

      .inner {
        height: 100%;

        border-radius: 12rpx;
        background-color: #7445E9;
      }
    }

    .tip {
      margin-left: 14rpx;

      color: #7445E9;
      font-size: 28rpx;
      line-height: 40rpx;
    }
  }

  .card {
    position: relative;
    width: 602rpx;

    margin: 33rpx auto 0;

    box-sizing: border-box;
    padding: 50rpx;

    border-radius: 28rpx;
    border: 2rpx solid #fff;
    background-color: #BCA2FF;
    box-shadow: 0 8rpx 23rpx rgba(150, 79, 221, .81);

    font-size: 40rpx;
    line-height: 58rpx;

    .icon {
      position: absolute;

      &.left {
        left: 10rpx;
      }

      &.right {
        right: 10rpx;
        transform: scaleX(-1);
      }

      &.top {
        top: 10rpx;

        width: 64rpx;
        height: 84rpx;
      }

      &.bottom {
        bottom: 10rpx;

        width: 64rpx;
        height: 30rpx;
      }
    }

    .content {
      width: 100%;
      max-height: calc(100vh - 900rpx);
      overflow-y: auto;

      .title {
        margin-bottom: 42rpx;
      }

      .option {
        margin-top: 16rpx;

        display: flex;

        .text {
          margin-left: 14rpx;
        }
      }
    }
  }

  .level-bar {
    position: relative;
    width: 600rpx;

    margin: 70rpx auto 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .l1 {
      width: 36rpx;
      height: 36rpx;

      .inner {
        width: 20rpx;
        height: 20rpx;
      }
    }

    .l2 {
      width: 56rpx;
      height: 56rpx;

      .inner {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .l3 {
      width: 76rpx;
      height: 76rpx;

      .inner {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .l1,
    .l2,
    .l3 {
      position: relative;

      box-sizing: border-box;
      border-radius: 50%;
      border: 4rpx solid;

      .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        border-radius: 50%;
      }

      .click-area {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: calc(100% + 52rpx);
        height: calc(100% + 52rpx);
      }
    }

    .a {
      border-color: #7445E9;

      .inner {
        background-color: #7445E9;
      }
    }

    .b {
      border-color: #A4157B;

      .inner {
        background-color: #A4157B;
      }
    }

    .c {
      border-color: #919191;

      .inner {
        display: none;
      }
    }

    .label {
      position: absolute;
      top: 90rpx;

      font-size: 40rpx;
      line-height: 58rpx;

      &.A {
        left: -6rpx;

        color: #7445E9;
      }

      &.B {
        right: -6rpx;

        color: #A4157B;
      }
    }
  }

  .btn {
    position: absolute;
    height: 104rpx;

    color: #fff;
    text-align: center;
    font-size: 48rpx;
    line-height: 96rpx;

    filter: grayscale(100%);
    pointer-events: none;
    transition: filter .3s;

    &.active {
      filter: grayscale(0%);
      pointer-events: all;
    }

    &.long {
      width: 482rpx;
    }

    &.short {
      width: 278rpx;
    }

    &.start {
      bottom: 266rpx;
      left: 130rpx;
    }

    &.pre {
      bottom: 144rpx;
    }

    &.next {
      bottom: 144rpx;
      right: 70rpx;
    }

    &.test {
      width: 240rpx;
      height: 80rpx;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);

      font-size: 34rpx;
      line-height: 80rpx;
    }
  }
}
</style>